<template>
	<div class="movie-detail">
		<div class="container">
			<div class="movie-header">
				<el-row :gutter="30">
					<el-col :span="8">
						<div class="movie-poster">
							<img :src="movie.poster" :alt="movie.name">
						</div>
					</el-col>
					<el-col :span="16">
						<div class="movie-info">
							<h1>{{ movie.title }}</h1>
							<div class="rate">
								<el-rate v-model="movie.rate" disabled show-score text-color="#ff9900"
									score-template="{value}">
								</el-rate>
							</div>
							<div class="info-item">
								<label>导演：</label>
								<span>{{ movie.director }}</span>
							</div>
							<div class="info-item">
								<label>主演：</label>
								<span>{{ movie.stars }}</span>
							</div>
							<div class="info-item">
								<label>类型：</label>
								<span>{{ movie.type }}</span>
							</div>
							<div class="info-item">
								<label>上映日期：</label>
								<span>{{ movie.releaseDate }}</span>
							</div>
							<div class="info-item">
								<label>片长：</label>
								<span>{{ movie.duration }}分钟</span>
							</div>

						</div>
					</el-col>
				</el-row>
			</div>

			<div class="movie-description mt-20">
				<h2>剧情简介</h2>
				<p>{{ movie.description }}</p>
			</div>

			<div class="screening-times mt-20">
				<h2>放映场次</h2>
				<el-table :data="screenings" style="width: 100%"  :default-sort = "{prop: 'date', order: 'descending'}">
					<el-table-column prop="date" label="放映日期" ></el-table-column>
					<el-table-column prop="startTime" label="时间" ></el-table-column>
					<el-table-column prop="cinema.name" label="影院" ></el-table-column>
					<el-table-column prop="hall.name" label="影厅" ></el-table-column>
					<el-table-column prop="price" label="价格">
						<template slot-scope="scope">
							¥{{ scope.row.price }}
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="primary" size="small" @click="selectScreening(scope.row)">选座购票</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		findMovieByIdApi
	} from '@/api/movie'
	
	import {
		findSchedulesByMovieIdApi
	} from '@/api/schedule'

	export default {
		name: 'MovieDetail',
		data() {
			return {
				movieId: 0,
				movie: {
					id: 3,
					title: '流浪地球2',
					poster: require('@/assets/images/流浪地球2.webp'),
					rate: 9.4,
					director: '郭帆',
					stars: '吴京、刘德华、李雪健、沙溢、宁理、王智',
					type: '科幻/灾难',
					releaseDate: '2023-01-22',
					duration: 180,
					desc: '太阳急速衰老膨胀，短时间内将吞没包括地球在内的整个太阳系。为应对这一危机，人类集结全球之力，开启流浪地球计划：在地球表面建造万台行星发动机，推动地球离开太阳系，前往新家园。在这场跨越2500年的生存之旅中，人类不仅要面对极端环境挑战，更要应对人工智能MOSS带来的生存危机。本片聚焦行星发动机全面升级、太空电梯危机、月球发动机过载危机等震撼篇章，展现人类命运共同体的壮丽史诗。'
				},
				scheduleId: 0,
				screenings: [{
						startTime: '12:30',
						cinemaName: '汉中万达影城',
						hallName: '一江春水',
						price: 34.44
					}, {
						startTime: '14:55',
						cinemaName: '汉中环球影城',
						hallName: '向东流',
						price: 34.44
					}


				]
			}
		},
		mounted() {
			this.movieId = this.$route.params.id
			this.findMovieById();
			this.findScheduleByMovieId();
		},
		methods: {
			async findMovieById() {
				const data = await findMovieByIdApi(this.movieId);
				this.movie = data.results;
			},
			selectScreening(screening) {
				this.$router.push({
					path: `/booking/${this.scheduleId}`
				})
			},
			async findScheduleByMovieId(){
				const data = await findSchedulesByMovieIdApi(this.movieId);
				console.log(data);
				this.screenings = data.results;
				
			}
			
		}
	}
</script>

<style scoped>
	.movie-header {
		padding: 30px 0;
	}

	.movie-poster {
		width: 100%;
		height: 400px;
		overflow: hidden;
		border-radius: 8px;
	}

	.movie-poster img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.movie-info {
		padding: 20px;
	}

	.movie-info h1 {
		margin: 0 0 20px 0;
		font-size: 28px;
		color: #303133;
	}

	.rating {
		margin-bottom: 20px;
	}

	.info-item {
		margin-bottom: 15px;
		font-size: 16px;
		color: #606266;
	}

	.info-item label {
		font-weight: bold;
		margin-right: 10px;
	}

	.movie-description h2,
	.screening-times h2 {
		font-size: 20px;
		color: #303133;
		margin-bottom: 15px;
	}

	.movie-description p {
		font-size: 16px;
		line-height: 1.6;
		color: #606266;
	}

	.el-button--large {
		margin-top: 20px;
		padding: 15px 30px;
		font-size: 16px;
	}
</style>